<template>
  <div class="home-page">
    <!-- 第一屏：个人介绍 -->
    <div v-show="currentScreen === 1" class="screen screen-1" ref="screen1">
      <div class="profile-card">
        <div class="avatar-container">
          <div class="avatar-wrapper" @click="handleAvatarClick">
            <a-avatar :size="120" :src="homeData.avatarUrl" class="avatar" />
            <div class="avatar-ring"></div>
            <div class="avatar-glow"></div>
          </div>
        </div>
        <div class="profile-info">
          <h1 class="name">{{ homeData.title.split(' - ')[0] }}</h1>
          <div class="title-container">
            <span class="title-icon">☕</span>
            <p class="title">{{ homeData.title.split(' - ')[1] || homeData.subtitle }}</p>
          </div>
          <p class="description">{{ homeData.subtitle }}</p>
          <div class="skills">
            <a-tag
              v-for="skill in homeData.skills"
              :key="typeof skill === 'string' ? skill : skill.name"
              class="skill-tag"
              :style="typeof skill === 'object' ? { color: skill.color, borderColor: skill.color } : {}"
            >
              <template #icon><CodeOutlined /></template>
              {{ typeof skill === 'string' ? skill : skill.name }}
            </a-tag>
          </div>
          <div class="social-links">
            <a-button type="text" class="social-btn" shape="circle">
              <GithubOutlined />
            </a-button>
            <a-button type="text" class="social-btn" shape="circle">
              <LinkedinOutlined />
            </a-button>
            <a-button type="text" class="social-btn" shape="circle">
              <MailOutlined />
            </a-button>
          </div>
        </div>
      </div>

      <!-- 向下按钮 -->
      <div class="scroll-down-btn" @mouseenter="showScrollHint = true" @mouseleave="showScrollHint = false">
        <a-button type="primary" shape="circle" size="large" @click="scrollToNext" class="down-button">
          <DownOutlined />
        </a-button>
        <p class="scroll-hint" :class="{ show: showScrollHint }">向下滚动</p>
      </div>
    </div>

    <!-- 第二屏：其他内容 -->
    <div v-show="currentScreen === 2" class="screen screen-2" ref="screen2">
      <div class="particles-bg">
        <div class="particle" v-for="i in 100" :key="i"></div>
      </div>

      <div class="content-container">
        <div class="title-section">
          <h2 class="neon-title">探索Echo Reminis</h2>
          <p class="subtitle">选择您感兴趣的领域</p>
        </div>

        <div class="cards-container">
          <div class="nav-card neon-card featured-card" @click="handleNavClick('articles')">
            <div class="card-glow"></div>
            <div class="card-content">
              <div class="card-icon">
                <FileTextOutlined />
              </div>
              <h3>技术文档</h3>
              <p>深入的技术文档和项目说明，包含最佳实践和架构设计</p>
              <div class="card-badge">NEW</div>
            </div>
          </div>

          <div class="nav-card neon-card compact-card" @click="handleNavClick('scripts')">
            <div class="card-glow"></div>
            <div class="card-content">
              <div class="card-icon">
                <CodeOutlined />
              </div>
              <h3>快捷脚本</h3>
              <p>实用的开发脚本和自动化工具</p>
            </div>
          </div>

          <div class="nav-card neon-card wide-card" @click="handleNavClick('message')">
            <div class="card-glow"></div>
            <div class="card-content">
              <div class="card-icon">
                <CommentOutlined />
              </div>
              <h3>留言板</h3>
              <p>分享想法、交流技术、留下您的宝贵意见</p>
              <div class="card-decoration">
                <div class="decoration-line"></div>
                <div class="decoration-dot"></div>
              </div>
            </div>
          </div>

          <div class="nav-card neon-card compact-card" @click="handleNavClick('about')">
            <div class="card-glow"></div>
            <div class="card-content">
              <div class="card-icon">
                <UserOutlined />
              </div>
              <h3>关于我</h3>
              <p>了解更多关于我的经历和技能</p>
            </div>
          </div>

          <div class="nav-card neon-card compact-card" @click="handleNavClick('github')">
            <div class="card-glow"></div>
            <div class="card-content">
              <div class="card-icon">
                <GithubOutlined />
              </div>
              <h3>GitHub</h3>
              <p>查看我的开源项目</p>
            </div>
          </div>

          <div class="nav-card neon-card compact-card" @click="handleNavClick('contact')">
            <div class="card-glow"></div>
            <div class="card-content">
              <div class="card-icon">
                <MessageOutlined />
              </div>
              <h3>联系我</h3>
              <p>获取联系方式</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 备案信息 -->
      <div class="footer-info">
        <p class="copyright">{{ globalData.siteCopyright }}</p>
        <a href="https://beian.miit.gov.cn/" target="_blank" class="icp-link">{{ globalData.siteIcp }}</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted, computed } from 'vue';
  import {
    DownOutlined,
    CodeOutlined,
    GithubOutlined,
    LinkedinOutlined,
    MailOutlined,
    UserOutlined,
    FileTextOutlined,
    MessageOutlined,
    CommentOutlined,
  } from '@ant-design/icons-vue';
  import {
    currentScreen,
    screen1,
    screen2,
    showScrollHint,
    handleAvatarClick,
    handleNavClick,
    scrollToNext,
    onMountedHandler,
    onUnmountedHandler,
  } from './index';
  import { useBlogConfig } from '/@/hooks/blog/useBlogConfig';

  // 定义组件名称
  defineOptions({
    name: 'HomePage',
  });

  // 使用博客配置
  const { getHomeData, getGlobalData, loadAllConfigs } = useBlogConfig();
  const homeData = getHomeData;
  const globalData = getGlobalData;

  // 自动获取当前年份
  const currentYear = computed(() => new Date().getFullYear());

  // 组件挂载
  onMounted(async () => {
    // 加载配置数据
    await loadAllConfigs();

    const cleanup = onMountedHandler();

    // 组件卸载时清理
    onUnmounted(() => {
      if (cleanup) cleanup();
      onUnmountedHandler();
    });
  });
</script>

<style lang="scss" scoped>
  @use './index.scss';
</style>
